<!-- 我的动态 -->
<template>
	<view class="dynamic-box" :class="!state.isPerson ? 'dynamic-box-no' : ''">
		<view class="dynamic-box-main">
			<scroll-view :scroll-top="state.scrollTop" scroll-y="true" class="scroll-Y" @scrolltolower="lower">
				<view class="dynamic-head-box">
					<view class="dynamic-head">
						<view class="dynamic-head-left" @click="goBack()">
							<uni-icons type="back" color="#fff" size="30"></uni-icons>
						</view>
						<view class="dynamic-head-center">{{ state.userInfo.ShowName }}</view>
						<view class="dynamic-head-right">
							<img src="@/assets/image/icon49.png" v-if="state.isPerson" @click="updetaUserInfo()" />
							<uni-icons type="more-filled" size="30" color="#fff" v-else @click="squareFn"></uni-icons>
						</view>
					</view>
					<view class="dynamic-fuc">
						<view class="view-item-image-head">
							<view class="view-item-image-head-title">{{ state.userInfo.ShowName }}</view>
							<view class="view-item-image-head-ident">
								<view class="view-item-image-head-ident-item view-item-image-head-ident-item1">
									<img :src="c05" alt="" v-if="state.userInfo.Sex == 0">
									<img :src="c06" alt="" v-else>
									<text>{{ state.userInfo.Age }}</text>
								</view>
								<Ident :userInfo="state.userInfo" />
								<RealSexAuth v-if="state.userInfo.RealState" :sex="state.userInfo.Sex" />
							</view>
						</view>
					</view>
					<img class="head-bg" :src="state.userInfo.Avatar" @tap="previewImage(state.userInfo.Avatar)">
					<!-- 关注按钮 -->
					<view class="followBtn" @tap="follow">
						<image src="../../../../assets/image/Vector.png" mode="heightFix"
							v-if="state.userInfo.IsFollow"></image>
						<image src="../../../../assets/image/Vector2.png" mode="heightFix" v-else></image>
					</view>
				</view>
				<view class="dynamic-main">
					<view class="chat-account">
						<view class="chat-account-left">
							<img src="@/assets/image/icon50.png" alt=""><text>社交账号</text>
						</view>
						<view class="chat-account-right" v-if="state.userInfo.WX">
							<view class="chat-account-right-fuc" v-if="state.userInfo.IsWxLock || state.isPerson">
								<text>{{ state.userInfo.WX
                            }}</text><img src="@/assets/image/icon51.png" alt="" @click="copy()">
							</view>
							<view class="chat-account-right-fuc chat-account-right-suo-fuc" @click="unLockWx()" v-else>
								<img src="@/assets/image/icon52.png" alt=""><text>解锁</text>
							</view>
						</view>
					</view>
					<view class="dynamic-account">
						<!-- tab页 -->
						<van-tabs v-model:active="active" shrink swipeable @change="onChange">
							<van-tab title="动态">
								<view class="dynamic-main-list">
									<template v-for="item in state.userTrendList" :key="item.ID">
										<SquareItem @on-praise="onPraise" :isDynamic="!state.isPerson"
											:dataItem="item" />
									</template>
								</view>
								<Empty v-if="state.userTrendList.length == 0" />
							</van-tab>
							<van-tab title="相册">
								<view class="photo-main-list">
									<view class="photo-main-list-item" v-for="(item, index) in state.userPhotoList"
										:key="item.ID">
										<PhotoListItem :itemData="item" :isPerson="state.isPerson"
											:userPhotoList="state.userPhotoList.map(o => o.FilePath)"
											:userAllPhoto="state.userPhotoList" :photoIndex="index" />
									</view>
								</view>
								<Empty v-if="state.userPhotoList.length == 0" />
							</van-tab>
							<van-tab title="资料">
								<view class="info-main-list">
									<BaseInfo :userInfo="state.userInfo" :tagsList="state.tags"
										:isPerson="state.isPerson" />
								</view>
							</van-tab>
						</van-tabs>
					</view>
				</view>
				<ActionSheetBox :actionsArr="state.actions" :currentItem="state.userInfo" ref="ActionSheetRef" />
				<AuthPup :types="2" ref="AuthPupRef">
					<template #auth>
						<OpenMember curIndex="8" :userInfo="state.userInfo" @TrendUnLockSuccess="TrendUnLockSuccess" />
					</template>
				</AuthPup>
			</scroll-view>
			<view class="dynamic-main-btn" v-if="!state.isPerson">
				<ReviewGift :userImId="state.userInfo.IMId">
					<template v-slot:gift-box>
						<van-button type="default">送礼</van-button>
					</template>
				</ReviewGift>
				<van-button type="primary" @click="chatFn()">打招呼</van-button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		toRefs,
		ref,
		onMounted,
		getCurrentInstance
	} from "vue"
	import SquareItem from "@/pages/home/components/squareItem/index.vue"
	import PhotoListItem from "@/components/photoListItem/index.vue"
	import BaseInfo from "@/components/personInfoMain/baseInfo.vue"
	import ReviewGift from "@/pages/home/components/reviewGift/index.vue"
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import c05 from '@/assets/image/icon05.png'
	import c06 from '@/assets/image/icon06.png'

	import {
		getAuthorization,
		setAuthorization
	} from "@/utils/auth.js"

	import {
		userTrend,
		UserInfo, // 获取userInfo
		OnePhotos, // 获取照片
		UserTag, // 获取tags 标签
		TrendUser, // 获取用户
		LookVisitorUser, // 进入用户动态
	} from "@/api/person/index.js"

	let {
		proxy
	} = getCurrentInstance()

	const state = reactive({
		active: 0,
		userId: "",
		tags: [],
		userInfo: {}, // 用户基本信息
		userPhotoList: [], // 用户照片
		userTrendList: [], // 用户动态
		actions: [{
				name: '对他隐身'
			},
			{
				name: '举报'
			},
			{
				name: '拉黑'
			},
		],
		PageIndex: 1,
		PageSize: 20
	})
	let {
		active
	} = toRefs(state)

	onLoad((options) => {
		state.isPerson = options.isPerson ? true : false
		if (options.userId) {
			state.userId = options.userId
		} else {
			state.userId = getAuthorization('userId')
		}
		if (!state.isPerson) {
			LookVisitorUserFn()
		}
		if (options.tabTypes) {
			state.active = Number(options.tabTypes)
			OnePhotosFn()
		}
		userTrendFn()
		UserBaseInfo()
	})

	onMounted(() => {})

	const copy = () => {
		uni.setClipboardData({
			data: state.userInfo.WX, //要被复制的内容
			success: () => { //复制成功的回调函数
				uni.showToast({
					title: "复制成功",
					icon: 'none',
					duration: 2000
				});
			}
		});
	}

	// 查看用户动态
	const LookVisitorUserFn = async () => {
		let params = {
			"visitorUserID": state.userId,
			"LookPage": "个人主页",
			"visitorPage": "个人主页"
		}
		let data = await proxy.$post(LookVisitorUser, params)

	}

	// 获取用户信息
	const UserBaseInfo = async () => {
		let data = await proxy.$get(UserInfo + state.userId);

		if (data.code == 200) {
			state.userInfo = data.data
		}
	}

	// 获取标签
	const UserTagFn = async () => {
		let params = {
			userId: state.userId
		}
		let data = await proxy.$get(UserTag, params)
		if (data.code == 200) {
			state.tags = data.data
		}
	}

	// 获取用户资料信息
	const userDataFn = () => {
		UserBaseInfo()
		UserTagFn()
	}

	// 获取动态
	const userTrendFn = async () => {
		let params = {
			PageIndex: state.PageIndex,
			PageSize: state.PageSize,
		}
		uni.showLoading({})
		let data = await proxy.$get(userTrend(state.userId), params)
		uni.hideLoading({})
		if (data.code == 200) {
			state.userTrendList = state.userTrendList.concat(data.data)
		}
	}

	// 获取照片
	const OnePhotosFn = async () => {
		let params = {
			PageIndex: state.PageIndex,
			PageSize: state.PageSize,
			userID: state.userId,
		}
		uni.showLoading({})
		let data = await proxy.$get(OnePhotos, params)
		uni.hideLoading({})
		if (data.code == 200) {
			state.userPhotoList = state.userPhotoList.concat(data.data.Photos)
		}
	}

	//点赞
	const onPraise = (id) => {
		let curIndex = state.userTrendList.findIndex(o => o.ID == id)
		state.userTrendList[curIndex].IsLike = !state.userTrendList[curIndex].IsLike
		if (state.userTrendList[curIndex].IsLike) {
			state.userTrendList[curIndex].LikeCount++
		} else {
			state.userTrendList[curIndex].LikeCount--
		}
	}

	let curIndex = ref()
	const onChange = (index) => {
		curIndex.value = index
		state.PageIndex = 1
		state.PageSize = 20
		state.userPhotoList = []
		state.userTrendList = []
		if (index == 0) userTrendFn()
		if (index == 1) OnePhotosFn()
		if (index == 2) userDataFn()
	}

	let AuthPupRef = ref()
	// 解锁社交账号
	const unLockWx = () => {
		AuthPupRef.value.squareFn()
	}

	// 金币解锁成功
	const TrendUnLockSuccess = () => {
		AuthPupRef.value.squareHideFn()
		UserBaseInfo()
	}

	const goBack = () => {
		uni.navigateBack(-1)
	}

	// 修改用户资料
	const updetaUserInfo = () => {
		uni.navigateTo({
			url: "/pages/home/person/profile/index"
		})
	}

	let ActionSheetRef = ref()
	const squareFn = () => {
		ActionSheetRef.value.actionSheetShow()
	}

	const lower = (e) => {
		state.PageIndex++
		lowerFn()
	}

	// 送礼物
	const lowerFn = () => {
		if (curIndex.value == 0) userTrendFn()
		if (curIndex.value == 1) OnePhotosFn()
	}

	// 打招呼
	const chatFn = () => {
		uni.navigateTo({
			url: "/pages/privateChat/index?userIMId=" + state.userInfo.IMId
		})
	}

	// 预览图片
	const previewImage = (src) => {
		uni.previewImage({
			urls: [src]
		});
	}

	// 关注or取消关注
	const follow = async () => {

		if (state.userInfo.IsFollow) {
			uni.showModal({
				content: '确定要取消关注吗？',
				success: async (res) => {
					if (res.confirm) {
						uni.showLoading({})
						let result = await proxy.$del(
							'/app/api/G/user-heibai/v1/CurrentUser/FollowUser/' +
							state.userInfo.ID);
						uni.hideLoading({})
						if (result.status) {
							state.userInfo.IsFollow = false;
						}
					}
				}
			})
		} else {
			uni.showLoading({})
			let result = await proxy.$post('/app/api/G/user-heibai/v1/CurrentUser/FollowUser', {
				followUserID: state.userInfo.ID,
				pagePatch: "个人主页"
			});
			uni.hideLoading({})
			if (result.status) {
				state.userInfo.IsFollow = true;
			}
		}

	}
</script>

<style lang="scss" scoped>
	.dynamic-box {
		position: fixed;
		width: 100vw;
		height: 100%;
		overflow: hidden;

		.dynamic-head-box {
			position: relative;
			height: 35vh;
			overflow: hidden;

			.followBtn {
				position: absolute;
				background: rgba(0, 0, 0, 0.5);
				border-radius: 26px;
				color: #ffffff;
				padding: 6rpx 20rpx;
				bottom: 60rpx;
				right: 20rpx;
				display: flex;
				align-items: center;

				image {
					height: 36rpx;
				}
			}
		}

		.dynamic-head {
			position: fixed;
			top: 0;
			width: 100vw;
			z-index: 65;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			padding: 0.9375rem;
			background-color: #00000036;
		}

		.dynamic-head-left,
		.dynamic-head-right {
			width: 60rpx;

			img {
				width: 36rpx;
				height: 36rpx;
			}
		}

		.dynamic-head-center {
			color: #fff;
			font-size: 36 rpx;
		}

		.head-bg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100vw;
		}
	}

	.view-item-image-head {
		position: absolute;
		bottom: 20rpx;
		z-index: 2;
		bottom: 70rpx;
		margin-left: 16rpx;

		.view-item-image-head-title {
			font-size: 32rpx;
			color: #fff;
			font-weight: 600;
			padding-bottom: 15rpx;
		}

		.view-item-image-head-ident {
			display: flex;
		}

		.view-item-image-head-ident-item {
			position: relative;
			height: 30rpx;
			margin-right: 10rpx;

			img {
				height: 100%;
				position: absolute;
			}
		}

		.view-item-image-head-ident-item1 {
			width: 60rpx;

			text {
				position: absolute;
				top: 3rpx;
				right: 5rpx;
				color: #fff;
				font-size: 20rpx;
			}
		}

		.view-item-image-head-ident-item2 {
			width: 80rpx;
		}
	}

	.chat-account {
		position: relative;
		z-index: 63;
		border-radius: 20rpx 20rpx 0 0;
		overflow: hidden;
		background: #fff3d1;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 15rpx;

		.chat-account-left {
			display: flex;
			align-items: center;

			text {
				font-size: 32rpx;
				font-weight: 600;
				margin-left: 15rpx;
			}
		}

		.chat-account-right {
			display: flex;
			align-items: center;

			.chat-account-right-fuc {
				background: #414141;
				color: #ffb94f;
				display: flex;
				align-items: center;
				justify-content: center;
				line-height: 64rpx;
				padding: 0 40rpx;
				border-radius: 64rpx;

				img {
					width: 32rpx;
					margin-left: 10rpx;
				}
			}

			.chat-account-right-suo-fuc {
				font-size: 28rpx;
				color: #ffb94f;

				img {
					width: 32rpx;
					margin-right: 10rpx;
				}
			}
		}
	}

	.dynamic-main {
		margin-top: -40rpx;
		padding-bottom: 150rpx;
	}

	.photo-main-list {
		display: flex;
		flex-wrap: wrap;

		.photo-main-list-item {
			width: calc(33.33% - 40rpx);
			margin: 30rpx 0 0 30rpx;
		}
	}

	.info-main-list {
		padding: 30rpx;
	}

	.dynamic-main-btn {
		position: absolute;
		padding: 20rpx 0;
		bottom: 0;
		width: 100vw;
		display: flex;
		z-index: 999;
		background: #fff;

		.van-button {
			width: calc(50% - 45rpx);
			margin-left: 30rpx;
			border-radius: 50rpx;
			font-size: 32rpx;
		}
	}

	:deep(.content-swiper-bottom-message-gift) {
		flex: none;
		width: calc(50% - 45rpx);

		.van-button {
			width: 100%;
		}
	}

	.scroll-Y {
		position: fixed;
		height: 100%;
	}

	.dynamic-box-no,
	.scroll-Y {
		padding: 0
	}

	.dynamic-box-main {
		position: relative;
		height: 100%;
	}
</style>
